<template>
  <div class="about">
    <at-button v-if="debug" @click="showData(chartData)">
      <i class="icon icon-align-center" /> this page data
    </at-button>
    <div id="myChart241" :style="{ width: '800px', height: '550px' }"></div>
    <!-- <div>
      <span>检控量增幅前三：</span>
      <at-tag
        color
        v-for="(item,index) in top3Lst"
        :key="index"
        style="margin-left:1rem"
      >{{item}}</at-tag>
    </div> -->
    <!-- {{top3Lst}} -->
    <input
      class="hdbtn"
      type="button"
      id="btn888"
      @click="downloadImpByChart()"
      value="保存为图片"
    />
  </div>
</template>
<style scoped></style>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'hello',
  data() {
    return {
      chartData: {},
      names: [],
      dataVP: [],
      dataVNG: [],
      top3Lst: [1, 2, 3],
      maxValue: 25,
      top3texts: [''],
    }
  },
  computed: {
    ...mapState(['cookies', 'debug']),
  },
  mounted() {
    this.updateCookies()
    this.chartData = this.cookies.chart241
    this.maxValue = this.chartData.maxValue
    this.top3Lst = this.chartData.top3Lst
    // var nameList = [];
    this.chartData.dataVP.forEach((item, index) => {
      this.names.push({
        name: item.name,
        max: this.maxValue,
      })
      this.dataVP[index] = item.value
    })

    this.chartData.dataVNG.forEach((item, index) => {
      this.dataVNG[index] = item.value
    })
    // alert(this.top3Lst.length)
    for (let i = 0; i < this.top3Lst.length; i++) {
      this.top3texts[0] += this.top3Lst[i] + '   '
    }
    // alert(this.chartData)
    this.drawLine()
  },
  methods: {
    ...mapMutations(['updateCookies', 'debug']),
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart241 = this.$echarts.init(document.getElementById('myChart241'))

      var option = {
        // backgroundColor: "#0A2E5D",
        normal: {
          top: 300,
          left: 300,
          width: 600,
          height: 500,
          zIndex: 6,
          // backgroundColor: "#0A2E5D"
        },
        color: ['rgba(245, 166, 35, 1)', 'rgba(19, 173, 255, 1)'],
        title: {
          show: true,
          text: this.chartData.title,
          left: 'center',
          top: '0%',
          textStyle: {
            color: '#000',
            fontSize: '26',
            fontFamily: 'FZXBSJW',
          },
        },
        grid: {
          left: '0%',
        },
        tooltip: {
          show: true,
          trigger: 'item',
        },
        legend: {
          show: true,
          // icon: "circle",
          left: '35%',
          top: '90%',
          orient: 'horizontal',
          textStyle: {
            fontSize: 14,
            color: '#0A2E5D',
          },
          data: ['村社检控量', '涉纪村社数'],
        },
        radar: {
          center: ['50%', '50%'],
          radius: '70%',
          startAngle: 45,
          splitNumber: 4,
          shape: 'circle',
          splitArea: {
            areaStyle: {
              color: ['transparent'],
            },
          },
          axisLabel: {
            // show: true,
            fontSize: 8,
            color: '#0A2E5D',
            fontStyle: 'normal',
            fontWeight: 'normal',
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#0A2E5D', //
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#0A2E5D', //
            },
          },
          indicator: this.names,
        },
        series: [
          {
            name: '村社检控量',
            type: 'radar',
            symbol: 'circle',
            symbolSize: 10,
            label: {
              show: true,
              // formatter: "({d}%)"
            },
            areaStyle: {
              normal: {
                color: 'rgba(245, 166, 35, 0.4)',
              },
            },
            itemStyle: {
              color: 'rgba(245, 166, 35, 1)',
              borderColor: 'rgba(245, 166, 35, 0.3)',
              borderWidth: 0,
            },
            // lineStyle: {
            //   normal: {
            //     type: "dashed",
            //     color: "rgba(245, 166, 35, 1)",
            //     width: 2
            //   }
            // },
            data: [this.dataVP],
          },
          {
            name: '涉纪村社数',
            type: 'radar',
            symbol: 'circle',
            symbolSize: 10,
            itemStyle: {
              normal: {
                color: 'rgba(19, 173, 255, 1)',
                borderColor: 'rgba(19, 173, 255, 0.4)',
                // borderWidth: 10
              },
            },
            label: { show: true },
            areaStyle: {
              normal: {
                color: 'rgba(19, 173, 255, 0.5)',
              },
            },
            // lineStyle: {
            //   normal: {
            //     color: "rgba(19, 173, 255, 1)",
            //     width: 2,
            //     // type: "dashed"
            //   }
            // },
            data: [this.dataVNG],
          },
        ],
        graphic: [
          {
            type: 'group',
            left: 'center',
            bottom: 10,
            children: [
              {
                type: 'text',
                z: 100,
                left: 'center',
                top: 'middle',
                style: {
                  // fill: 'gray',
                  text: ['检控量前三村社：' + this.top3texts[0]].join('\n'),
                  font: '14px Microsoft YaHei',
                },
              },
            ],
          },
        ],
      }

      // 绘制图表
      myChart241.setOption(option)
    },
    showData(jsondata) {
      this.$Modal.alert({ content: jsondata })
    },

    downloadImpByChart() {
      this.common.saveChart(
        this.$echarts.getInstanceByDom(document.getElementById('myChart241')),
        this.cookies.chart241.title
      )
    },
  },
}
</script>
<style scoped>
.about {
  padding-top: 2rem;
}
#myChart241 {
  margin: 0 auto;
}
</style>
